<div id="welcome">
    <div 
        ng-if="!ctrl.showLoadingIndicator && ctrl.lastConnectedClientOS === 'ios'" 
        class="desktop-beta-banner" 
        ng-class="{work: ctrl.lastConnectedAppFlavor === 'work'}"
    >
        <div class="prose">
            <p translate>
                welcome.DESKTOP_BETA_HINT_INTRO_TEXT1
            </p>
            <p translate>
                welcome.DESKTOP_BETA_HINT_INTRO_TEXT2
            </p>
        </div>

        <a class="button" ng-href="{{ctrl.lastConnectedAppFlavor === 'work' ? 'https://threema.ch/work/download-mdw' : 'https://threema.ch/download-md'}}" target="_blank">
            <span class="badge" translate>common.BETA</span>
            <div class="content">
                <img ng-if="ctrl.lastConnectedAppFlavor === 'consumer'" class="app-icon" src="img/app-icon-consumer-live.svg">
                <img ng-if="ctrl.lastConnectedAppFlavor === 'work'" class="app-icon" src="img/app-icon-work-live.svg">
                <span class="label" translate>welcome.DESKTOP_BETA_HINT</span>
            </div>
            <md-icon class="icon" class="material-icons md-24">arrow_downward</md-icon>
        </a>
    </div>

    <div class="welcome">
        <div ng-if="(ctrl.state === 'connecting' || ctrl.state === 'waiting') && ctrl.mode === 'scan'" class="scan">
            <div class="ios-only-warning" ng-if="ctrl.browser.safari">
                <img src="img/safari.svg" alt="Safari">
                <p><strong translate>common.NOTE</strong> <span translate>welcome.SAFARI</span></p>
            </div>

            <div class="instructions centered">
                <p class="title" translate>welcome.PLEASE_SCAN</p>
                <div class="text">
                    <p translate>welcome.PLEASE_SCAN_INSTRUCTIONS</p>
                </div>
            </div>

            <qrcode 
                ng-class="{ small: !ctrl.showLoadingIndicator && ctrl.lastConnectedClientOS === 'ios' }"
                version="{{ ctrl.qrCode.version }}"
                id="connecting-code"
                error-correction-level="{{ ctrl.qrCode.errorCorrectionLevel }}"
                size="{{ ctrl.qrCode.size }}" 
                margin="{{ ctrl.qrCode.margin }}"
                data="{{ ctrl.qrCode.data }}"
            ></qrcode>

            <div class="password-entry">
                <label>
                    <p translate id="aria-label-password-create" ng-if="!ctrl.inMemorySessionPasswordEnabled">welcome.CHOOSE_PASSWORD</p>
                    <p translate id="aria-label-password-create" ng-if="ctrl.inMemorySessionPasswordEnabled">welcome.CHOOSE_PASSWORD_AUTOPW</p>
                    <form>
                        <md-input-container md-no-float class="md-block">
                            <input type="password"
                                   ng-model="ctrl.password"
                                   aria-labelledby="aria-label-password-create"
                                   translate-attr="{'placeholder': 'welcome.PASSWORD', 'aria-label': 'welcome.PASSWORD'}"
                                   title="{{ 'welcome.PASSWORD_STRENGTH' | translate }}: {{ ctrl.passwordStrength.score }} ({{ ctrl.passwordStrength.strength }})"
                                   autocomplete="new-password">
                            <div class="password-strength-indicator" aria-hidden="true">
                                <div class="reached" ng-style="{
                                    'flex-grow': ctrl.passwordStrength.score,
                                    'background-color': (ctrl.passwordStrength.strength | strengthToColor),
                                }"></div>
                                <div class="unreached" ng-style="{
                                    'flex-grow': 80 - ctrl.passwordStrength.score,
                                }"></div>
                            </div>
                        </md-input-container>
                    </form>
                </label>
            </div>
        </div>

        <div ng-if="(ctrl.state === 'new' || ctrl.state === 'connecting') && ctrl.mode === 'unlock'" class="unlock">
            <h2 class="instructions centered" translate>welcome.PLEASE_UNLOCK</h2>
            <div class="password-entry">
                <label>
                    <p translate id="aria-label-password-reconnect" ng-if="ctrl.inMemorySessionPassword === undefined">welcome.ENTER_PASSWORD</p>
                    <p translate id="aria-label-password-reconnect" ng-if="ctrl.inMemorySessionPassword !== undefined">welcome.CONNECTION_INTERRUPTED</p>
                    <form ng-submit="ctrl.unlockConfirm()">
                        <md-input-container md-no-float class="md-block">
                            <input ng-if="ctrl.inMemorySessionPassword === undefined"
                                   type="password"
                                   ng-model="ctrl.password"
                                   ng-disabled="ctrl.formLocked"
                                   autofocus
                                   aria-labelledby="aria-label-password-reconnect"
                                   translate-attr="{'placeholder': 'welcome.PASSWORD'}"
                                   autocomplete="current-password">
                        </md-input-container>
                        <md-button
                            type="submit"
                            class="md-raised md-primary"
                            autofocus
                            ng-disabled="ctrl.formLocked"
                            translate translate-attr-aria-label="welcome.BTN_RECONNECT">
                            <span translate aria-hidden="true">welcome.BTN_RECONNECT</span>
                        </md-button>
                    </form>
                    <p>
                        <span translate>welcome.ALTERNATIVELY</span>
                        <a href="#" ng-click="ctrl.deleteSession()" translate>welcome.FORGET_SESSION</a>.
                    </p>
                </label>
            </div>
        </div>

        <div ng-if="ctrl.showLoadingIndicator">
            <h2 class="instructions centered" translate ng-if="ctrl.state !== 'push' || !ctrl.hasAppleNonVoipPushToken()">welcome.CONNECTING</h2>
            <h2 class="instructions centered" translate ng-if="ctrl.state === 'push' && ctrl.hasAppleNonVoipPushToken()">welcome.PLEASE_START_APP</h2>
            <div class="loading">
                <md-progress-circular md-mode="determinate" value="{{ ctrl.progress }}" md-diameter="250" ng-aria-disable>
                </md-progress-circular>
                <div class="info" aria-live="polite" ng-aria-disable>
                    <p class="percentage">{{ ctrl.progress }}%</p>
                    <p ng-if="ctrl.state === 'push' && !ctrl.hasAppleNonVoipPushToken()" translate>welcome.WAITING_FOR_PUSH</p>
                    <p ng-if="ctrl.state === 'push' && ctrl.hasAppleNonVoipPushToken()" translate>welcome.WAITING_FOR_APP</p>
                    <p ng-if="ctrl.state === 'peer_handshake'" translate>welcome.CONNECTING_TO_APP</p>
                    <p ng-if="ctrl.state === 'loading' || ctrl.state === 'done'" translate>welcome.LOADING_INITIAL_DATA</p>

                    <!-- Troubleshooting: High-priority pushes (FCM & APNs VoIP) -->
                    <div class="troubleshoot" ng-if="ctrl.slowConnect && !ctrl.hasAppleNonVoipPushToken()">
                        <h3 translate>troubleshooting.SLOW_CONNECT</h3>
                        <ul class="material-icons-list">
                            <li ng-if="ctrl.state === 'push' && ctrl.isApnsPushToken()" class="help">
                                <span translate>troubleshooting.IOS_48</span>
                            </li>
                            <li class="help">
                                <span translate>troubleshooting.PHONE_ONLINE</span>
                            </li>
                            <li ng-if="ctrl.state === 'push'" class="help">
                                <span translate>troubleshooting.APP_STARTED</span>
                            </li>
                            <li ng-if="ctrl.state === 'push'" class="help">
                                <span translate>troubleshooting.WEBCLIENT_ENABLED</span>
                            </li>
                            <li ng-if="ctrl.state === 'push'" class="help">
                                <span translate>troubleshooting.SESSION_DELETED</span>
                            </li>
                            <li ng-if="ctrl.state === 'push'" class="info">
                                <span translate>troubleshooting.UNLOCK_OR_CHARGE</span>
                            </li>
                            <li ng-if="ctrl.state === 'push'" class="info">
                                <span translate>troubleshooting.PUSH_FAQ</span>
                            </li>
                            <li ng-if="ctrl.state === 'peer_handshake' && ctrl.showWebrtcTroubleshooting" class="help">
                                <span translate>troubleshooting.PLUGIN</span>
                            </li>
                            <li ng-if="ctrl.state === 'peer_handshake' && ctrl.showWebrtcTroubleshooting" class="help">
                                <span translate>troubleshooting.ADBLOCKER</span>
                            </li>
                        </ul>
                        <md-button role="button" class="md-raised md-primary reload-btn" ng-click="ctrl.deleteSession()" ng-if="ctrl.state === 'push'" aria-labelledby="aria-label-forget">
                           <span translate id="aria-label-forget">welcome.FORGET_SESSION_BTN</span>
                        </md-button>
                        <md-button role="button" class="md-raised md-primary reload-btn" ng-click="ctrl.reload()" aria-labelledby="aria-label-reload">
                            <i class="material-icons">refresh</i> <span translate id="aria-label-reload">welcome.RESTART_SESSION</span>
                        </md-button>
                    </div>

                    <!-- Troubleshooting: Non high-priority pushes (APNs Non-VoIP) -->
                    <div class="troubleshoot" ng-if="ctrl.slowConnect && ctrl.hasAppleNonVoipPushToken()">
                        <h3 translate>troubleshooting.SLOW_CONNECT</h3>
                        <ul class="material-icons-list">
                            <li ng-if="ctrl.state === 'push'" class="help">
                                <span translate>troubleshooting.APP_STARTED_AND_VISIBLE</span>
                            </li>
                            <li class="help">
                                <span translate>troubleshooting.PHONE_ONLINE</span>
                            </li>
                            <li ng-if="ctrl.state === 'push'" class="help">
                                <span translate>troubleshooting.WEBCLIENT_ENABLED</span>
                            </li>
                            <li ng-if="ctrl.state === 'push'" class="help">
                                <span translate>troubleshooting.SESSION_DELETED</span>
                            </li>
                            <li ng-if="ctrl.state === 'push'" class="info">
                                <span translate translate-values="{'faqUrl': 'https://three.ma/webios'}">troubleshooting.PUSH_FAQ_IOS_FOREGROUND</span>
                            </li>
                        </ul>
                        <md-button role="button" class="md-raised md-primary reload-btn" ng-click="ctrl.deleteSession()" ng-if="ctrl.state === 'push'" aria-labelledby="aria-label-forget">
                           <span translate id="aria-label-forget">welcome.FORGET_SESSION_BTN</span>
                        </md-button>
                        <md-button role="button" class="md-raised md-primary reload-btn" ng-click="ctrl.reload()" aria-labelledby="aria-label-reload">
                            <i class="material-icons">refresh</i> <span translate id="aria-label-reload">welcome.RESTART_SESSION</span>
                        </md-button>
                    </div>
                </div>
            </div>
        </div>

        <div class="manual-start" ng-if="ctrl.state === 'manual_start'">
            <h2 class="instructions" translate>welcome.MANUAL_START</h2>
            <p translate>welcome.MANUAL_START_TEXT1</p>
            <i class="illustration material-icons md-dark md-96">phone_android</i>
            <p translate>welcome.MANUAL_START_TEXT2</p>
            <ol>
                <li translate>welcome.MANUAL_START_STEP1</li>
                <li translate>welcome.MANUAL_START_STEP2</li>
                <li translate>welcome.MANUAL_START_STEP3</li>
            </ol>
        </div>

        <div class="already-connected" ng-if="ctrl.state === 'already_connected'">
            <h2 class="instructions" translate>welcome.ALREADY_CONNECTED</h2>
            <i class="illustration material-icons md-dark md-96">phonelink_ring</i>
            <p translate>welcome.ALREADY_CONNECTED_DETAILS</p>
            <br>
            <md-button class="md-raised md-primary" ng-click="ctrl.reload()">
                <i class="material-icons">refresh</i> <span translate>welcome.RELOAD</span>
            </md-button>
        </div>

        <div ng-if="ctrl.state === 'closed'">
            <p class="state error">
                <strong><span translate>common.ERROR</span>:</strong> <span translate>connecting.CONNECTION_CLOSED</span><br>
                <span translate>welcome.PLEASE_RELOAD</span>
            </p>
            <br>
            <md-button class="md-raised md-primary" ng-click="ctrl.reload()">
                <i class="material-icons">refresh</i> <span translate>welcome.RESTART_SESSION</span>
            </md-button>
        </div>

        <div ng-if="ctrl.state === 'reconnect_failed'">
            <p class="state error">
                <strong><span translate>common.ERROR</span>:</strong> <span translate>connecting.RECONNECT_FAILED</span><br>
                <span translate>welcome.PLEASE_RELOAD</span>
            </p>
            <br>
            <md-button class="md-raised md-primary" ng-click="ctrl.reload()">
                <i class="material-icons">refresh</i> <span translate>welcome.RESTART_SESSION</span>
            </md-button>
        </div>

    </div>
</div>
